<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖拽接口</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;  
            float: left;
            margin: 10px; 
        }

        .div1 {
            border: 1px solid orange;
        }

        .div2 {
            border: 1px solid red;
        }

        .pe {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="div1" id="div1">
        <!-- 在 H5 中，如果想拖拽元素，就必须为元素添加 draggable="true"
            图片和超链接不用添加，默认可以拖拽
        -->
        <p class="pe" id="pe" draggable="true">试着把我拖过去</p>
    </div>
    <div class="div2" id="div2"></div>

    <script>
        var oSource = document.querySelector("#pe")
        var oDiv1 = document.querySelector("#div1")
        var oDiv2 = document.querySelector("#div2")
        // 开始拖拽
        oSource.ondragstart = function() {
            console.log("拖拽开始")
        }
        // 拖拽结束
        oSource.ondragend = function() {
            console.log("拖拽结束")
        }
        // 拖拽离开，拖拽元素的鼠标离开了被拖拽元素的范围
        oSource.ondragleave = function() {
            console.log("拖拽离开")
        }
        // 拖拽
        oSource.ondrag = function() {
            console.log("拖拽")
        }

        /*
            应用于目标元素的事件
            ondragenter 当拖拽元素进入时调用
            ondragover 当停留在目标元素上使调用
            ondrop 在目标元素上松开鼠标时调用
            ondragleave 鼠标离开目标元素时调用
        */
        oDiv2.ondragenter = function() {
            console.log("ondragenter")
        }

        oDiv2.ondragover = function(e) {
            console.log("ondragover")
            // 如果想触发 ondrop 事件，这里必须添加阻止浏览器默认行为代码
            e.preventDefault()
        }

        // 浏览器默认会阻止 ondrop 事件
        // 我们必须在 ondragover 中阻止浏览器的默认行为
        oDiv2.ondrop = function() {
            console.log("ondrop")
            // 添加被拖拽的元素到当前目标元素
            oDiv2.appendChild(oSource)
        }

        oDiv2.ondragleave = function() {
            console.log("ondragleave")
        }

        // 将元素拖拽回去
        oDiv1.ondragover = function (e) {
            e.preventDefault()
        }

        oDiv1.ondrop = function () {
            oDiv1.appendChild(oSource)
        }
    </script>
</body>
</html>